<!--
 * @Author: qianduanxuyaochendian lxy_01@outlook.com
 * @Date: 2022-05-14 14:40:57
 * @LastEditors: qianduanxuyaochendian lxy_01@outlook.com
 * @LastEditTime: 2022-05-14 16:23:28
 * @FilePath: \job\web\src\views\register\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div class="left-container">
      <n-image
        preview-disabled="false"
        src="https://pro.naiveadmin.com/assets/login-bg.be83cd61.svg"
      />
    </div>
    <div class="right-container">
      <div class="register-container">
        <div class="header-container">
          <div class="title">
            <div class="logosvg">
              <n-icon :size="60">
                <svg-icon name="Logo"></svg-icon>
              </n-icon>
            </div>
            <div class="name">
              <n-gradient-text :size="32" type="success"
                >AIIT JobMaster</n-gradient-text
              >
            </div>
          </div>
          <div class="introduce">AIIT JobMaster一款基于vue的校招平台</div>
        </div>
        <div class="main-container">
          <code-register></code-register>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CodeRegister from "./components/CodeRegister.vue"
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: aquamarine;
  .left-container {
    width: 50%;
    height: 100%;
    background-color: #2d8cf0;
  }
  .right-container {
    width: 50%;
    height: 100%;
    background-color: #ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .register-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 80%;
      width: 60%;
      .header-container {
        .title {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 10px;
        }
        .introduce {
          margin-top: 15px;
          margin-bottom: 15px;
          font-size: 14px;
          color: #808695;
          text-align: center;
        }
      }
      .main-container {
        height: 80%;
        width: 80%;
      }
    }
  }
}
</style>
